

var codeUrl = 'http://m2.t1.laisj.com/publics/home/index?from='+getUrlParam('id');


//引导页按钮动画
$('.loadpage .load-btn').click(function(){
	$('.page').css('display','block');
	$('.loadpage').animate({
		left: "-100%",
        opacity: 0,
	},800,function(){
		$(this).css('display','none');
	});
})






var $win = $('#web .alert-view'),
	$div = $('#web .alert div'),
	$text = $('#web .alert-view p'),
	$crop = $('#crop');
	
var chinese = '.chinese-view',
    english = '.english-view';
    
var val = [];
var imgArr = [];    
	
//切换中英版
changeLanguange();
$('#web .chinese').trigger('click');
function changeLanguange() {
	var $chinese = $('#web .chinese');
	var $english = $('#web .english');
	$chinese.on('click',function() {
		$('title').html('我的产品-制作海报'); 
		
		$chinese.addClass('active');
		$english.removeClass('active');
		$(this).parent().parent().removeClass('active');
		//清空数据
		clearData(english);
		
		changeText(true);
		
		createPoster(chinese);
	});
	$english.on('click',function() {
		$('title').html('My product- Create a poster'); 
		
		$english.addClass('active');
		$chinese.removeClass('active');
		$(this).parent().parent().addClass('active');
		//清空数据
		clearData(chinese);
		
		createPoster(english);
		
		changeText(false);
	});
}
//切换中英文
function changeText(off){
	if(off){
		$text.text('您还有重要信息没填');
		$div.text('确定');
		$crop.text('确定');
	}else{
		$text.text('Please full fill your information');
		$div.text('OK');
		$crop.text('OK');
	}
}

//生成海报按钮的点击事件
function createPoster(wrap){
	$(wrap+' .content .submit-btn').click(function(){
		//1.信息验证  查看信息是否都已填写
		var $input = $(wrap+' .content input');
		if(ruturnVal($input)){
			$win.fadeIn();
			$('.alert div').click(function(){
				$win.fadeOut();
			});
			
			//input 
			$input.on('focusout',function(){
			    if($(this).val()==''){
			    	$(this).addClass('active');
			    }else{
			    	$(this).removeClass('active');
			    }
			});
			$input.trigger('focusout');
			productimg(wrap);
		}else{
			
			for(var i = 0;i<$input.length;i++){
				if(i!=3&&i!=7){
					val.push($input.eq(i).val());
				}
			}
			val.push($(wrap+' #pro-img').attr('src'));
			
			
			if(wrap==='.chinese-view'){
				//中文版
				imgArr.push(drawfc());
				imgArr.push(drawsc());
				imgArr.push(drawtc());
				
				//上传数据
		   		updata(0);
				
			}else{
				//英文版
				imgArr.push(drawfe());
				imgArr.push(drawse());
				imgArr.push(drawte());
				
			    //上传数据
	            updata(1);
			}
		}
	})
}
$div.click(function(){
	$win.fadeOut();
});
function ruturnVal($input){
	for(var i = 0;i<$input.length-1;i++){
		if($input.eq(i).val()==''){
			return true;
		}
	}
	return false;
}
//验证  图片是否存在
function productimg(wrap){
	var $product_img = $(wrap+' .content-img .product-img');
	var $upload = $(wrap+' .content-img .upload');
	if($product_img.attr('src')==''){
		$upload.addClass('active');
	}else{
		$upload.removeClass('active');
	}
}
//清空页面所有数据
function clearData(wrap){
	var $img = $(wrap+' .content-img .product-img');
	$(wrap+' .content input[type="reset"]').trigger('click');
	$img.attr('src','');
	
	$(wrap+' .content-img .upload').css('display','block');
	$img.css('display','none');
}







var $tailView = $('#web .tailor-view'),
	$imgcrop = $('.tailor-view img');
	
//截取图片
cropperImg(chinese);
cropperImg(english);
function cropperImg(wrap){
	
	var $file = $(wrap+' .content-img input');
	var $avaterimg = $(wrap+' .content-img .product-img');
	$(wrap+' .content-img .img-wrap').on('click',function(e){
		$file.trigger('click');
	})
	$file.on('change',function(){
	    changeView(wrap,$avaterimg);
	    
	    var files,file;
	    files = $(this).prop('files');
	    if(files.length > 0){
	    	file = files[0];
	    	if(isImageFile(file)){
	    		var url = URL.createObjectURL(file);
	    		tailorview(true);
	    		//crop
	    		init(url,$avaterimg);
	    	}
	    }
	})
}

//切换视图
function changeView(wrap,$avaterimg){
	$(wrap+' .content-img .upload').css('display','none');
	$avaterimg.css('display','block');
}
//判断是否是图片
function isImageFile(file) {
  if (file.type) {
    return /^image\/\w+$/.test(file.type);
  } else {
    return /\.(jpg|jpeg|png|gif)$/.test(file);
  }
}

//切换  裁剪图片与编辑页面
function tailorview(off){
	if(off){
		$tailView.css('display','block');
	}else{
		$tailView.css('display','none');
	}
}

//裁剪图片界面初始化
function init(url,$avaterimg){
	
	var $avatarWrap = $('#web .container .avatrwrap');
	var $img = $('<img src="' + url + '">');
    $avatarWrap.empty().html($img);
	$img.cropper({
		aspectRatio: 1 / 1,
		viewMode: 1,
		dragMode: 'move',
		autoCropArea: 1.0,
		restore: false,
		guides: false,
		highlight: false,
		cropBoxMovable: false,
		cropBoxResizable: false
	});
	$('#crop').click(function () {
		
        var dataURL = $('.avatrwrap>img').cropper('getCroppedCanvas').toDataURL('image/jpeg');
        
        $avaterimg.attr('src',dataURL);
        tailorview(false);
   });
}








//创建模板图片对象
var posterObj = { 
	1:['img/poster1c.jpg','img/poster1e.jpg','img/poster1-top.png'],
	2:['img/poster2c.jpg','img/poster2e.jpg','img/poster2-top.png'],
	3:['img/poster3c.jpg','img/poster3e.jpg','img/poster3-top.png']
};
var olength = Object.keys(posterObj).length;
var n = 1;
for(var i = 1;i<=olength;i++){
	for(var j = 0;j<posterObj[i].length;j++){
		var vaname = 'img'+n;
		window[vaname] = new Image();
		window[vaname].src = posterObj[i][j];
		n++;
	}
}


//生成模板
//poster1    c:中文  ，  e:英文
function drawfc(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");
	
    var imgpro = document.getElementById('pro-img');

    ctx.drawImage(img1,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,267,938,100,100);
	
    var name= inputText(ctx,val[0],592,90);
	Textright(ctx,'这是',540-(val[0].length - 2)*26,90);
	  
	var num = inputText(ctx,'第'+val[1]+'次',460,130);
	Textright(ctx,'广交会之行',592,130);
	  
	Textright(ctx,'这次 我带着爆款产品',592,175);
	var product = inputText(ctx,val[2],592,215);
	  
	Textright(ctx,'向各大买家发起进攻!!',592,260);
	  
	ctx.drawImage(imgpro,50,318,420,420);
	ctx.drawImage(img3,64,332,390,390);
	  
	booth(ctx,val[5],50,800);
	TextLeft(ctx,val[3],50,845);
	TextLeft(ctx,'Tel:'+val[4],50,890);
	  
	var url = canvas.toDataURL("image/jpeg");
	return url;
}
//poster1 英文
function drawfe(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");
	
    var imgpro = document.getElementsByClassName('product-img')[1];

    ctx.drawImage(img2,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,267,938,100,100);
	
	Textright(ctx,'This is ',528-(val[0].length-5)*7.5,95);
    var name= inputText(ctx,val[0]+'‘s',610,95);
	
	Textright(ctx,' time to Canton Fair',610,135);
	var num = inputText(ctx,val[1],385,135);
	  
	Textright(ctx,'I bring the extreme hot product',610,175);
	var product = inputText(ctx,'Named '+val[2],610,210);
	  
	Textright(ctx,'Initiate an invitation to all buyers!!',610,250);
	  
	ctx.drawImage(imgpro,50,318,420,420);
	ctx.drawImage(img3,64,332,390,390);
	  
	booth(ctx,val[5],50,800);
	TextLeft(ctx,val[3],50,845);
	TextLeft(ctx,'Tel:'+val[4],50,890);
	  
	var url = canvas.toDataURL("image/jpeg");
	return url;
}
//poster1
function inputText(ctx,text,x,y){
  	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#1879bf';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}
function TextLeft(ctx,text,x,y){
	ctx.font='26px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'start';
  	ctx.fillText(text, x, y);
}
function Textright(ctx,text,x,y){
	ctx.font='26px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}
function booth(ctx,text,x,y){
	ctx.font='bold 38px arial';
  	ctx.fillStyle = '#1879bf';
  	ctx.textAlign = 'left';
  	ctx.fillText(text, x, y);
  	return ctx;
}


//poster2 
//中文
function drawsc(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");
	
    var imgpro = document.getElementById('pro-img');

    ctx.drawImage(img4,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,94,900,88,88);
	
	ctx.drawImage(imgpro,90,303,370,370);
	ctx.drawImage(img6,30,37,593,681);
	
    var name= inputText2(ctx,val[0],550,850);
    Textright2(ctx,'这是',490-(val[0].length - 2)*30,850);
	  
	var num = inputText2(ctx,'第'+val[1]+'次',398,895);
	Textright2(ctx,'广交会之行',550,895);
	  
	Textright2(ctx,'这次 我带着爆款产品',550,940);
	var product = inputText2(ctx,val[2],550,980);
	  
	Textright2(ctx,'向各大买家发起进攻!!',550,1025);
	  
	  
	booth2(ctx,val[5],48,158);
	TextLeft(ctx,val[3],48,204);
	
	ctx.font='22px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'start';
  	ctx.fillText('Tel:'+val[4],48,240);
  	
	var url = canvas.toDataURL("image/jpeg");
	return url;
}
//英文
function drawse(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");
	
    var imgpro = document.getElementsByClassName('product-img')[1];

    ctx.drawImage(img5,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,61,900,88,88);
	
	ctx.drawImage(imgpro,90,303,370,370);
	ctx.drawImage(img6,30,37,593,681);
	
    var name= p2inputText(ctx,'This is '+val[0]+'‘s',590,865);
	
	Textright(ctx,'time to Canton Fair',590,903);
	var num = p2inputText(ctx,val[1],365,903);
	  
	Textright(ctx,'I bring the extreme hot product',590,945);
	var product = p2inputText(ctx,'Named '+val[2],590,983);
	  
	Textright(ctx,'Initiate an invitation to all buyers!!',590,1025);
	  
	  
	booth2(ctx,val[5],48,158);
	TextLeft(ctx,val[3],48,204);
	
	ctx.font='22px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'start';
  	ctx.fillText('Tel:'+val[4],48,240);
  	
	var url = canvas.toDataURL("image/jpeg");
	return url;
}

//poster2
function inputText2(ctx,text,x,y){
  	ctx.font='bold 30px arial';
  	ctx.fillStyle = '#29206f';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}
function TextLeft2(ctx,text,x,y){
	ctx.font='30px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'start';
  	ctx.fillText(text, x, y);
}
function Textright2(ctx,text,x,y){
	ctx.font='30px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}
function booth2(ctx,text,x,y){
	ctx.font='bold 44px arial';
  	ctx.fillStyle = '#29206f';
  	ctx.textAlign = 'left';
  	ctx.fillText(text, x, y);
}
function p2inputText(ctx,text,x,y){
	ctx.font='26px arial';
  	ctx.fillStyle = '#29206f';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}


//poster3
//中文
function drawtc(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");
	
    var imgpro = document.getElementById('pro-img');
    ctx.drawImage(img7,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,280,945,80,80);
	
	Textright(ctx,'这是',320-(val[0].length-2)*13,190);
	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'left';
  	ctx.fillText(val[0],320-(val[0].length-2)*13,190);
  	
  	
	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'right';
  	ctx.fillText('第'+val[1]+'次',286+(val[1].length-1)*7.5,230);
	TextLeft(ctx,'广交会之行',286+(val[1].length-1)*7.5,230);
	  
	Textcenter(ctx,'我带着我的爆款产品',320,268);
	var product = inputText3(ctx,val[2],320,305);
	  
	Textcenter(ctx,'向各大买家发起进攻!!',320,345);
	  
	Textcenter(ctx,'我在',320,788);  
	booth3(ctx,val[5],320,820);
	companyName(ctx);
	tel(ctx);
  	
  	ctx.drawImage(img9,108,360,422,319);
  	ctx.arc(322,512,132,0,2*Math.PI);
  	// 从画布上裁剪出这个圆形
  	ctx.clip();
  	ctx.drawImage(imgpro, 190, 380, 264, 264); 
  	
	var url = canvas.toDataURL("image/jpeg");
	return url;
}
function drawte(){
	var canvas = document.getElementById("canvas");
	var sWidth = '640',
		sHeight = '1136';
	canvas.width = sWidth;
	canvas.height = sHeight;
	var ctx = canvas.getContext("2d");

    var imgpro = document.getElementsByClassName('product-img')[1];;
    ctx.drawImage(img8,0,0,sWidth,sHeight);
    //绘制二维码
    ctx.drawImage($qrcode,280,945,80,80);
	
	Textright(ctx,'This is ',320-(val[0].length-5)*7,190);
	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'left';
  	ctx.fillText(val[0],320-(val[0].length-5)*7,190);
  	
  	
	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'right';
  	ctx.fillText(val[1]+' time ',286+(val[1].length-5)*7,230);
	TextLeft(ctx,' to Canton Fair',286+(val[1].length-5)*7,230);
	  
	Textcenter(ctx,'I bring the extreme hot product',320,268);
	var product = inputText3(ctx,val[2],320,305);
	  
	Textcenter(ctx,'Initiate an invitation to all buyers!!',320,345);
	  
	Textcenter(ctx,"I'm here",320,788);  
	booth3(ctx,val[5],320,820);
	companyName(ctx);
	tel(ctx);
  	
  	ctx.drawImage(img9,108,360,422,319);
  	ctx.arc(322,512,132,0,2*Math.PI);
  	// 从画布上裁剪出这个圆形
  	ctx.clip();
  	ctx.drawImage(imgpro, 190, 380, 264, 264); 
  	
	var url = canvas.toDataURL("image/jpeg");
	return url;
} 
//poster3
function inputText3(ctx,text,x,y){
  	ctx.font='bold 26px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'center';
  	ctx.fillText(text, x, y);
}
function Textcenter(ctx,text,x,y){
	ctx.font='26px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'center';
  	ctx.fillText(text, x, y);
}
function Textright3(ctx,text,x,y){
	ctx.font='26px arial';
  	ctx.fillStyle = '#000000';
  	ctx.textAlign = 'right';
  	ctx.fillText(text, x, y);
}
function booth3(ctx,text,x,y){
	ctx.font='bold 28px arial';
  	ctx.fillStyle = '#038cce';
  	ctx.textAlign = 'center';
  	ctx.fillText(text, x, y);
}
function companyName(ctx){
	ctx.font='26px arial';
  	ctx.fillStyle = '#ffffff';
  	ctx.textAlign = 'center';
  	ctx.fillText(val[3], 320, 863);
}
function tel(ctx){
	ctx.font='24px arial';
  	ctx.fillStyle = '#000000';
  	ctx.fillText('Tel:'+val[4],320,905);
}






//上传数据
function updata(index){
	$.ajax({
		type:"post",
		url:"http://m2.t1.laisj.com/publics/cantonfair/makeposter",
		async:false,
		data:{
			poster_uri:imgArr,
			img:val[6],
			tel:val[4],
			times:val[1],
			owner_name:val[0],
			company_name:val[3],
			booth:val[5],
			name:val[2],
			refereed_id:getUrlParam('id')
		},
		success:function(res){    //成功得到返回时运行
            if(res.code==200){
            	clearData(chinese);
            	clearData(english);
            	var id = res.msg.id;
            	location.href = 'myPoster.html?id='+id+'&type='+index;
            }
            if(res.code=400||res.code==401){
            	
            }
        },
        ajaxError:function(a,b,c){
            console.log(a);      //错误的对象
            console.log(b);         //错误的类型
            console.log(c);      //错误的信息
        },
        dataType:'JSON'
	});
}

//获取cookie的方法
function getCookie(name) {
	var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
	if(arr = document.cookie.match(reg))
		return unescape(arr[2]);
	else
		return null;
}


//生成二维码
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替换为table
    width: 100,
    height: 100,
    text: codeUrl
});
var $qrcode = document.getElementById('qrcode').firstElementChild;
var codeImg = $qrcode.toDataURL("image/jpeg");




//获取链接参数的方法
function getUrlParam(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);   //匹配目标参数
	//返回参数值
	if (r!=null){
		return unescape(r[2]);
	}else{
		return true;      
	}  
} 